
<template>
  <div class="form-design-setting-container">
    <el-form label-width="130px" label-position="left">
      <el-tabs v-model="tabs1">
        <el-tab-pane label="题目设置" name="1">
          <el-form-item label="是否必填" label-width="100px">
            <el-checkbox v-model="formComponent.require" label="必填" />
          </el-form-item>
          <el-form-item label="宽度设置" label-width="100px">
            <el-select v-model="formComponent.width" placeholder="请选择">
              <el-option v-for="item in designOptions.widthOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="tabs2">
        <el-tab-pane label="文件设置" name="1">
          <el-form-item label="文件类型限制">
            <el-switch v-model="formComponent.acceptLimit" inline-prompt active-text="限制" inactive-text="不限制" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-select v-if="formComponent.acceptLimit" v-model="formComponent.accept" multiple placeholder="请选择限制类型">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-form-item label="单个文件大小限制">
            <el-select v-model="formComponent.fileSize">
                <el-option v-for="item in sizeOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="文件数量限制">
            <el-select v-model="formComponent.limit">
                <el-option v-for="item in limiitOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue'
import { designOptions } from "@/views/form/manage/design/config/formCmpConfig.js";

const props = defineProps({
  formComponent: {
    type: Object,
  },
})
const formComponent = computed(() => { return props.formComponent })
const tabs1 = ref('1')
const tabs2 = ref('1')
//
const options = ref([
  { label: '图像文件', value: 'jpg|jpeg|png|gif|bmp' },
  { label: '视频文件', value: 'mp4|avi' },
  { label: '音频文件', value: 'mp3|wav|aac' },
  { label: '文本文件', value: 'txt|md' },
  { label: 'PDF 文件', value: 'pdf' },
  { label: 'Word 文档', value: 'doc|docx' },
  { label: 'Excel 文件', value: 'xls|xlsx' },
  { label: 'PowerPoint 文件', value: 'ppt|pptx' },
  { label: '压缩文件', value: 'zip|rar|7z|tar|tgz' },
]);
const sizeOptions = ref([
  { label: '10M', value: 10 },
  { label: '30M', value: 30 },
  { label: '50M', value: 50 },
  { label: '100M', value: 100 }
]);
const limiitOptions = ref([
  { label: '1个', value: 1 },
  { label: '2个', value: 2 },
  { label: '3个', value: 3 }
]);
</script>

<style lang="scss" scoped>
.el-select{
    width: 100%;
}
// ::v-deep .el-form-item__content{
//     justify-content: end;
// }
// ::v-deep .el-form-item__label{
//     width: 150px;
// }
.el-checkbox-group{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  .checkbox-item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 5px;
    width: 100%;
    .el-checkbox{
      margin-right: 5px;
      ::v-deep(.el-checkbox__label){
        display: none;
      }
    }
  }
}
</style>
